<template>
    <div>
        <div>
            <div class="item">
                <div class="title" @click="expandItem">{{ item.name }}</div>
                <div class="action">
                    <el-input width="44px" size="small" title="排序" v-model.number="item.ord"
                        @change="setCategoryOrder" />
                    <el-button link type="danger" size="small" @click="deleteCategoryVisible = true">删除</el-button>
                    <el-button link type="success" size="small" @click="addWebVisible = true">添加网站</el-button>
                    <el-button link type="primary" size="small" @click="updateCategoryVisible = true">更改</el-button>
                    <el-button link type="warning" size="small" @click="changeCategoryPrivate">
                        <span v-if="item.private">
                            公开
                        </span>
                        <span v-else>
                            自嗨
                        </span>
                    </el-button>
                </div>
            </div>

            <div class="sub" v-show="isExpand">
                <ol>
                    <li v-for="(web, idx) in currentWebs" :key="web.id" class="sub-item">
                        <div>
                            {{ idx + 1 }}.
                            <a target="_blank" class="web-title" :href="web.uri">{{ web.title }}</a>
                        </div>
                        <div class="actions">
                            <el-button link type="danger" size="small" @click="deleteWeb(web.id)">直接删除</el-button>
                            <el-button link type="primary" size="small" @click="updatingWeb = web">更改</el-button>
                            <el-button link type="warning" size="small" @click="changeWebPrivate(web)">
                                <span v-if="web.private">
                                    公开
                                </span>
                                <span v-else>
                                    自嗨
                                </span>
                            </el-button>
                        </div>
                    </li>
                </ol>

                <div v-if="currentSubCategories">
                    <web-category-item v-for="item in currentSubCategories" :key="item.id" :item="item"
                        :rootCategories="rootCategories"></web-category-item>
                </div>
            </div>
        </div>

        <!-- 删除栏目 -->
        <el-dialog v-model="deleteCategoryVisible" title="Confirm" width="500">
            <span>确认删除 {{ item.name }} 吗?</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="deleteCategoryVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="deleteWebCategory">
                        Confirm
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 编辑栏目 -->
        <el-dialog v-model="updateCategoryVisible" title="Edit">
            <el-form label-width="auto">
                <el-form-item label="父级">
                    <el-select v-model="item.category_id" placeholder="父级" clearable>
                        <el-option v-for="category in rootCategories" :key="category.id" :label="category.name"
                            :value="category.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="Name">
                    <el-input v-model="item.name" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="updateCategoryVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="updateCategory">
                        Confirm
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 添加网站 -->
        <el-dialog v-model="addWebVisible" title="Add" width="500">
            <el-form>
                <el-form-item label="Url">
                    <el-input v-model="webUrl" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="addWebVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="addWeb">
                        Confirm
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 编辑网站 -->
        <el-dialog v-model="updatingWeb" title="Edit">
            <el-form label-width="auto">
                <el-form-item label="父级">
                    <el-select v-model="updatingWeb.category_id" placeholder="父级" clearable>
                        <el-option v-for="category in rootCategories" :key="category.id" :label="category.name"
                            :value="category.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="Url">
                    <el-input v-model="updatingWeb.uri" autocomplete="off" />
                </el-form-item>
                <el-form-item label="Title">
                    <el-input v-model="updatingWeb.title" autocomplete="off" />
                </el-form-item>
                <el-form-item label="Description">
                    <el-input :rows="2" type="textarea" v-model="updatingWeb.description" autocomplete="off" />
                </el-form-item>
                <el-form-item label="Img">
                    <el-input v-model="updatingWeb.img" autocomplete="off">
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <img width="32" :src="updatingWeb.img">
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="updatingWeb = null">Cancel</el-button>
                    <el-button type="primary" @click="updateWeb">
                        Confirm
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import config from "@/config";
import router from "@/router";
import { get, post } from "@/utils/http";
import { ref } from "vue";


const props = defineProps(['item', 'rootCategories'])



const isExpand = ref(false)

const updateCategoryVisible = ref(false)
const deleteCategoryVisible = ref(false)

const updatingWeb = ref(null)


const addWebVisible = ref(false)
const webUrl = ref('')

let categoryDetail = null
const currentSubCategories = ref([])
const currentWebs = ref([])


const expandItem = () => {
    isExpand.value = !isExpand.value
    if (isExpand.value) {
        if (!categoryDetail) {
            get(config.config.getSubCategory + "?id=" + props.item.id).then((resp) => {
                if (resp.data.errCode == 0) {
                    categoryDetail = resp.data.item
                    currentSubCategories.value = categoryDetail.sub_web_category
                    currentWebs.value = categoryDetail.webs
                }
            })
        }
    }
}


// 删除栏目
const deleteWebCategory = () => {
    post(config.config.deleteWebCategory, { "id": props.item.id }).then((resp) => {
        let res = resp.data
        if (res.errCode != 0) {
            alert(res.errMsg)
        } else {
            router.go(0)
        }
    })
}
//编辑栏目

const updateCategory = () => {
    if (props.item.name.length < 1) {
        return
    }
    post(config.config.updateWebCategory, props.item).then((resp) => {
        let res = resp.data
        if (res.errCode != 0) {
            alert(res.errMsg)
        } else {
            router.go(0)
        }
    })
}

// 添加网站
const addWeb = () => {
    if (webUrl.value.length < 1) {
        return
    }
    post(config.config.addWeb, { "uri": webUrl.value, "category_id": props.item.id }).then((resp) => {
        let res = resp.data
        if (res.errCode != 0) {
            alert(res.errMsg)
        } else {
            router.go(0)
        }
    })
}

const changeCategoryPrivate = () => {
    const data = props.item
    data.private = !props.item.private
    post(config.config.updateWebCategory, data).then((resp) => {
        let res = resp.data
        if (res.errCode != 0) {
            alert(res.errMsg)
        } else {
            router.go(0)
        }
    })
}

const changeWebPrivate = (item) => {
    item.private = !item.private
    post(config.config.updateWeb, item).then((resp) => {
        let res = resp.data
        if (res.errCode != 0) {
            alert(res.errMsg)
        } else {
            router.go(0)
        }
    })
}

const updateWeb = () => {
    post(config.config.updateWeb, updatingWeb.value).then((resp) => {
        let res = resp.data
        if (res.errCode != 0) {
            alert(res.data)
        } else {
            updatingWeb.value = null
        }
    })
}

const deleteWeb = (id) => {
    post(config.config.deleteWeb, { "id": id }).then((resp) => {
        let res = resp.data
        if (res.errCode != 0) {
            alert(res.data)
        } else {
            router.go(0)
        }
    })
}

const setCategoryOrder = () => {
    post(config.config.setWebCategoryOrder, { "id": props.item.id, "ord": props.item.ord }).then((resp) => {
        let res = resp.data
        if (res.errCode != 0) {
            alert(res.data)
        } else {
            router.go(0)
        }
    })
}
</script>

<style scoped>
.action {
    display: flex;
    gap: 11px;
}
</style>
